<!--
 * Description: CBOM Quote Edit
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/10/29 16:42
-->

<template>
  <div>
    <!--数据表单-->
    <el-form label-width="150px" :model="formData" size="mini">
      <el-row>
        <!--BU类型-->
        <el-col :span="12">
          <el-form-item :label="$t('Cbom.bu')">
            <span>{{ formData.bu }}</span>
          </el-form-item>
        </el-col>

        <!--产品专案-->
        <el-col :span="12">
          <el-form-item :label="$t('Cbom.project')">
            <span>{{ formData.project }}</span>
          </el-form-item>
        </el-col>

        <!--Tracking Sku-->
        <el-col :span="12">
          <el-form-item :label="$t('Cbom.trackingSku')">
            <span>{{ formData.trackingSku }}</span>
          </el-form-item>
        </el-col>

        <!--CBOM版本-->
        <el-col :span="12">
          <el-form-item :label="$t('Cbom.cbomVersion')">
            <span>{{ formData.cbomVersion }}</span>
          </el-form-item>
        </el-col>

        <!--SAP料号-->
        <el-col :span="24">
          <el-form-item label="SAP料号">
            <span>{{ formData.partNumber }}</span>
          </el-form-item>
        </el-col>

        <!--EC/DFC Cost-->
        <el-col :span="12">
          <el-form-item label="EC/DFC Cost">
            <el-input
              v-model="formData.ecDfcCost"
              clearable
              :placeholder="$t('input.placeholder')"
            />
          </el-form-item>
        </el-col>

        <!--Base Cost-->
        <el-col :span="12">
          <el-form-item label="Base Cost">
            <el-input
              v-model="formData.baseCost"
              clearable
              :placeholder="$t('input.placeholder')"
            />
          </el-form-item>
        </el-col>

        <!--FD Cost-->
        <el-col :span="12">
          <el-form-item label="FD Cost">
            <el-input v-model="formData.fdCost" clearable :placeholder="$t('input.placeholder')" />
          </el-form-item>
        </el-col>

        <!--CBOM Cost-->
        <el-col :span="12">
          <el-form-item label="CBOM Cost">
            <el-input
              v-model="formData.cbomCost"
              clearable
              :placeholder="$t('input.placeholder')"
            />
          </el-form-item>
        </el-col>

        <!--TEC Pool Cost-->
        <el-col :span="12">
          <el-form-item label="TEC Pool Cost">
            <el-input
              v-model="formData.tecPoolCost"
              clearable
              :placeholder="$t('input.placeholder')"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span style="display: block;text-align: center;margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button size="medium" type="primary" @click="save">
        {{ $t('button.save') }}
      </el-button>
    </span>
  </div>
</template>

<script>
export default {
  name: 'CbomEdit',
  props: {
    /** 修改的行数据 */
    rowData: {
      type: Object,
      default: () => {}
    },
    /** 专案数据列表 */
    projectList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      /** 表单数据 */
      formData: {}
    }
  },
  created() {
    this.formData = this.$deepCopy(this.rowData)
  },
  methods: {
    save() {
      try {
        setTimeout(() => {
          this.$bus.$emit('cbom-row-edit', this.formData)
        }, 0)
        this.cancel()
      } catch (error) {
        console.log(error)
      }
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item__content span {
  margin-left: 5px;
  color: blue;
}
</style>
